<template>
  <view class="video-wrap" >
	<view @click="closePage" class="close-wrap">
	<u-icon name="close-circle" color="#666" size="54" ></u-icon>
	</view>
	<div class="video-wrap-head">
	<view class="video-wrap-head-cover">
			<u-upload
		  ref="uUpload"
		   max-count="1"
		  :show-tips="false"
		  :action="upLoadAction"
		  :form-data="formData"
		  @on-remove="onRemove"
		  @clear="clearCover"
		  width="110"
		  height="110"
		  upload-text="上传封面"
		></u-upload>
		<u-input v-model="value"  placeholder-style="color:#eee" class="input-title" placeholder="请输入短视频标题"></u-input>
	</view>


		<view class="goods-card" v-if="getuserInfo.role==='shop'">
		<u-icon v-if="getVideoGoods.goods_name" class="goods-card-close" name="close" color="#eee" size="28" @click="clearGoods"></u-icon>
		<view class="goods-card-selectBox" @click="goPickGoods" v-if="!getVideoGoods.goods_name">
				<u-icon name="plus-circle-fill" color="#333" size="68"></u-icon>
				<p class="goods-card">选择商品</p>
		</view>

		<view class="goods-card-goodsBox" v-if="getVideoGoods.goods_name" @click="goGoodsDetails">
				<u-image :src="getVideoGoods.thumb_url" width="100" height="100"></u-image>
				<p class="goods-card-name">{{getVideoGoods.goods_name}}</p>
		</view>
	</view>
	</div>
   <div class="upload-wrap-block" >
	  	<view class="upload-icon-box" v-if="percent!==100" @click="uploadVideo">
			<u-icon  :name='percent===100?"play-circle-fill":"camera-fill"' size="160" color='#999'></u-icon>
			<p  class="upload-wrap-txt">上传视频</p>
		</view>
		<u-icon class="icon-reset-video" v-if="percent===100" name="close-circle" color="#666" size="54" @click="reset"></u-icon>
		<video class="video-preview" id="myVideo" :src="videoPath"  v-show="videoPath.length"
                   show-loading="false" show-fullscreen-btn="false" show-play-btn="false" object-fit="cover" :title="value"
				   autoplay
				   ></video>
 		<div class="upload-wrap"  :style="{backgroundColor:percent===100?'#000':null}" v-show="percent!==100"> 
	   	   	<u-line-progress v-if="percent>0" class="u-m-t-10"  active-color="#ff445a" height="20" striped striped-active inactive-color="#333" :percent="percent"></u-line-progress>
		</div>
	  
   </div>

		<!-- <u-popup v-model="previewShow" mode="center">
					<video class="video-preview" id="myVideo" :src="videoPath"
                    @error="videoErrorCallback" show-loading="false" show-fullscreen-btn="false" show-play-btn="false" object-fit="cover" :title="value"></video>
			</u-popup> -->
    <u-button type="error" class="post-btn" shape="circle" @click="post">{{ $t("发布") }}</u-button>
	<u-toast ref="uToast"></u-toast>
	<u-modal v-model="publishShow" 
	title="发布成功"
	 @confirm="confirmPublish" 
	 @cancel="cancelPublish"
	 show-cancel-button
	 confirm-text="去查看"
	 confirm-color="#ff445a"
	 cancel-color="#999"

	 >
		<view class="slot-content">
			<view class="checkbox-mark-wrap">
				<u-icon name="checkbox-mark" color="#fff" size="58"></u-icon>
			</view>
			
		</view>
	</u-modal>
  </view>
</template>

<script>
import { SERVERTAPI } from "@/config/index";
import { mapGetters } from 'vuex'
import { auth } from "@/base-core"
export default {
  data() {
    return {
      value: "",
	  videoPath:'',
	  previewShow:false,
	  formData:{},
	   upLoadAction: '',
	   percent:0,
	   publishShow: false
    };
  },
  onLoad(){
	this.upLoadAction=this.$baseUrl + "api/Common/uploadPic",
	this.formData = this.$http.returnCommonParams(
	  "api/Common/uploadPic",
	  "short-video"
	);  
  },
   computed:{
		...mapGetters([
				'getuserInfo',
				'getVideoGoods'
			]),
	},
	onHide(){
		this.sucucssPublishTimeout && clearTimeout(this.sucucssPublishTimeout)
	},
  methods: {
   bindTextAreaBlur: function (e) {
		  console.log(e.detail.value)
		  this.value = e.detail.value
	  },
	  closePage(){
		uni.navigateBack()
	  },
	  reset(){
		this.clearCover() // 清空封面
		this.value = ''  // 清空标题
		this.percent = 0 // 清空进度
		this.videoPath = ''  // 重置视频

	  },
	  goPickGoods(){
			const { shop_id } = this.getuserInfo
			this.$u.route({
				url:'/pagesC/shop/storeDetails',
				params:{
					shop_id,
					fromPage :'videoPublish'
				}
			})
	  },
	  clearGoods(){
			this.$store.commit('setVideoGoods', {})
	  },
	  confirmPublish(){
		this.$u.route({
			url: '/pagesB/tabBar/cart'
		})
	  },
	  cancelPublish(){
		console.log('用户点击取消')
	  },
   		async post() {
		const isLogin = await auth.login()
		console.log({isLogin});
		
		if(!isLogin) return 
		const {value:title,videoPath} = this
		if(!title){
			return this.$toast('请输入短视频标题')
		}
		const coverRes = this.$refs.uUpload.lists.filter(val => {
			return val.progress == 100;
		})
		console.log({coverRes})
		const {response = {}} =  coverRes[0] || {}
		if(!coverRes.length || response && response.data && !response.data.path){
			return this.$toast('请上传短视频封面')
		}
		if(!videoPath){
			return this.$toast('请上传短视频')
		}
		const { id:goods_id} = this.getVideoGoods
		const params = {
			goods_id,
			title,
			cover_img:response.data.path,
			video_path:videoPath,
			describe:title
		}
		console.log({params});
		
      this.$http.addVideo(params).then(res=>{
		console.log({res})
		 if(res.status===200){
			 this.publishShow = true
			 this.clearGoods() // 清空
			 this.sucucssPublishTimeout = setTimeout(()=>{
 				this.reset()
			 },1000)
		 }else{
 			this.$toast(res.mess)
		 }
		 
	  });
    },
	previewVideo(){
		this.previewShow= true
	},
	onRemove(index, lists) {
				console.log('图片已被移除')
	},
	goGoodsDetails(){
		const { id } = this.getVideoGoods
		this.$u.route({
			url: 'pagesC/goods/goodsDetails',
			params:{
				id
			}
		})
	},
	clearCover(){

	},
	async uploadVideo(){
		// const isLogin = await auth.login()
		// if(!isLogin) return 
		if(this.percent===100){
			return this.previewVideo()
		}
		uni.chooseVideo({
			success: res=> {
				this.percent = 10
				this.$http.uploadVideo(res.tempFilePath,'short_video').then(result=>{
					const {status,mess,data} = result.data && JSON.parse(result.data)
					if(status===200){
						this.videoPath = data && data.path
						this.percent = 100
					}
					this.$toast(mess)
				})
				
			}
		});
	}
  },
};
</script>

<style lang="scss" scoped>
.video-wrap {
  background-color: #000;
  padding:140rpx 20px 20px;
  height: 100%;
  &-head{
	  display: flex;
	
	  position: relative;
	  z-index: 100;
	  margin-top: 50rpx;
	  &-cover{
		background-color:  rgba(255,255,255,0.3);
		flex:2;
		margin-right: 20rpx;
		display: flex;
		align-items: center;
		border-radius: 8rpx;
	  }
	 .goods-card{
		background-color: #666;
		border-radius: 8rpx;
		padding:14rpx;
		width: 180rpx;
		flex:1;
		&-name{
		width: 100px;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		color:#eee;
		font-size: 12px;
		margin-top: 8rpx
		}
		&-goodsBox{
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center
		}
		&-selectBox{
		text-align: center
		}
}
.goods-card-close{
	position: absolute;
	top:-10rpx;
	right: 0;
}
  }
}
.close-wrap{
	position:absolute;
	top:120rpx;
	left:30rpx;
	z-index: 999;
}
.title {
  font-size: 32rpx;
  color: #333;
  font-weight: 600;
  margin: 20px 0 10px;
}
.v-textarea {
  background-color: #f5f5f5;
  font-size: 28rpx;
  padding: 10px 8px;
  width: 100%;
  height: 80rpx;
  border-radius: 8px;
}
.post-btn {
  margin-top: 20px;
  position: fixed;
  bottom:50rpx;
  width:670rpx;
  height: 90rpx;
  background-color: #ff445a;
  z-index: 200;
}

.upload-wrap{
	width:200rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	flex-direction: column;
	border-radius: 4rpx;
	&-txt{
		font-size:28rpx;
		color:#999;
		margin-top:10rpx;
	}
}
.upload-icon-box{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column

}
.upload-wrap-block{
	position: relative;
	left: 0;
	right:0;
	bottom:0;
	top:160rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	z-index: 0;
	
}
.icon-reset-video{
	position: absolute;
	right: 30rpx;
	top:-60rpx;
	z-index: 1000;
}
.video-preview{
	width:720rpx;
	height:800rpx;
	
}
.slot-content{
	display: flex;
	justify-content: center;
	margin: 40rpx 0;
}
.checkbox-mark-wrap{
	background-color: rgb(253, 42, 83);
	width:120rpx;
	height: 120rpx;
	border-radius: 400rpx;
	display: flex;
	align-items: center;
	justify-content: center
}
/deep/ .u-add-tips{
	font-size:20rpx
}
/deep/ .u-add-wrap{
	background-color: #333;
}
/deep/ .uni-input-input{
	color:#fff
}
.input-title{
	color:#fff
}
</style>